import React, { Component } from 'react'
import { Card, Button, message } from 'antd';
import ReactEcharts from 'echarts-for-react';  // or var ReactEcharts = require('echarts-for-react');


export default class Bar extends Component {
    state = {
        sales: [10, 52, 200, 334, 390, 330, 220],
        store: [390, 334, 290, 200, 35, 70, 80]
    }
    // echart的数据配置项
    getOption = (sales, store) => {
        return {
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['商品销量', '商品库存']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '商品销量',
                    type: 'line',
                    data: sales
                },
                {
                    name: '商品库存',
                    type: 'line',
                    data: store
                }
            ]
        }
    };
    // 更新库存
    updateStore = () => {
        this.setState(state => ({
            sales: state.sales.map(item => item + 10),
            store:state.store.map(item=>(item <= 0) ? message.error('没有库存了'): item -10)
            
        })
        )
    }
    render() {
        const title = (
            <Button type="primary" onClick={this.updateStore}>更新库存</Button>
        )
        return (
            <Card title={title}>
                <ReactEcharts
                    option={this.getOption(this.state.sales, this.state.store)} />
            </Card>
        )
    }
}
